<template>
	<t-modal
		title="新增"
        destroyOnClose
		:width="640"
		:visible="visible"
		:confirmLoading="loading"
		@ok="() => {$emit('ok')}"
		@cancel="() => {advancedMatch = ''; $emit('cancel')}"
	>
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-form-item class="hiddenItem">
					<a-input v-decorator="['uuid']" disabled type="hidden" />
				</a-form-item>
                <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="请输入表头名称" v-decorator="['columnName', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
                <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="请输入编码" v-decorator="['columnCode', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
                <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <t-dict-select-tag
						type="select"
						dictCode="MenuStatus"
						placeholder="请选择状态"
						:allowClear="false"
						v-decorator="[
						'columnStatus',
						{
							initialValue: 'MenuStatus.01',
							rules: [{ required: true, message: '请选择状态！' }],
						},
						]"
					/>
				</a-form-item>
                <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input-number placeholder="排序" :min="1" :max="9999" v-decorator="['columnSort', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
				<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-textarea placeholder="请输入备注" v-decorator="['columnRemake']" />
				</a-form-item>
			</a-form>
		</a-spin>
	</t-modal>
</template>

<script>
import pick from 'lodash.pick';
import { TDictSelectTag } from '@/components'

const fields = ['uuid','columnName','columnCode','columnStatus', 'columnSort','columnRemake'];

export default {
	props: {
		visible: {
			type: Boolean,
			required: true,
		},
		loading: {
			type: Boolean,
			default: () => false,
		},
		model: {
			type: Object,
			default: () => null,
		}
	},
	components: {
		TDictSelectTag
	},
	data() {
		return {
			labelCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 7,
				},
			},
			wrapperCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 13,
				},
			},
			form: this.$form.createForm(this),
            advancedMatch: ""
		};
	},
    created() {
		// 防止表单未注册
		fields.forEach((v) => this.form.getFieldDecorator(v));
		// 当 model 发生改变时，为表单设置值
		this.$watch('model', () => {
            // this.advancedMatch = this.model.advancedMatch;
			// this.model.listStatus = this.model.listStatus.toString();
			this.model && this.form.setFieldsValue(pick(this.model, fields));
		});
	},
	methods: {
		advancedMatchChange(e){
            this.advancedMatch = e
        }
	}
};
</script>
